<template>
	<view class="job-dtl-box">
		<view class="common-tips-box">
			<view class="t1">简历置顶</view>
			<view class="t2">预计被HR查看的几率，将会提升80%~89%</view>
		</view>
		<view class="position-to-top">
			<view :key="index" @click="handleSelect" :data-gid='index' v-for="(item,index) in positionToTopList" :data-default="item.desc"
			 :class="{'info-item-wrap': true, 'defualt': item.desc, 'select': index === selectIndex}">
				<view class="info-item">
					<view class="top-box clear-fix">
						<view class="name bold pull-left">
							{{ item.name }}
						</view>
						<view class="bold pull-right discount-price">
							￥{{ item.amounts }}
						</view>
					</view>
					<view class="bottom-box clear-fix">
						<view class="name pull-left">
							{{ item.cycle }}
						</view>
						<view class="bold pull-right price line-through">
							￥{{ item.oldAmounts }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="discription">
			<view class="discription-item-wrap" v-for="(item, index) in positionToTopDiscriptionList" :key="index">
				<text class="relative discription-item">{{item}}</text>
			</view>
		</view>
		<view class="occupying"></view>
		<view class="confirm-warp w100">
			<view class="confirm-box clear-fix">
				<view class="total-box pull-left">
					<view class="total">
						总计：<text style="color: #E41805;" class="bold total-discount-price">￥{{ totalDiscountPrice }}</text>
					</view>
					<view class="price line-through">
						原价：<text class="bold">￥{{ totalPrice }}</text>
					</view>
				</view>
				<button class="confirm-btn pull-right" type="purchase" hover-class="hoverClass" @click="handlePurchase">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setWorkPromotion,
		getPositionToTopInfo
	} from '../../../apis/recruit/index.js';
	export default {
		data() {
			return {
				id: 0,
				selectIndex: 1,
				totalDiscountPrice: 0,
				totalPrice: 0,
				positionToTopList: [],
				positionToTopDiscriptionList: [
					'简历置顶后，将会获得更多的曝光度；',
					'购买成功后，简历将会优先推荐给招聘者，不同城市/职位职级曝光量，随竞争情况会有所差异；',
					'置顶时限到期后，需要续费才能继续获得优先和置顶；'
				]
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getData();
		},
		methods: {
			initDataFn() {
				const {
					oldAmounts,
					amounts,
				} = this.positionToTopList[1]

				this.totalPrice = oldAmounts,
					this.totalDiscountPrice = amounts
			},
			getData() {
				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 10000000,
					mask: true,
				});
				getPositionToTopInfo().then(res => {
					if (res.code == 1) {
						this.positionToTopList = res.data.list.personal
						this.initDataFn();
						uni.hideToast();
					}
				})
			},
			handleSelect(e) {
				let selectIndex = e.currentTarget.dataset.gid,
					positionToTopList = this.positionToTopList;

				this.totalPrice = parseInt(positionToTopList[selectIndex].oldAmounts)
				this.selectIndex = selectIndex
				this.totalDiscountPrice = parseInt(positionToTopList[selectIndex].amounts)
			},
			handlePurchase() {
				const {
					selectIndex,
					totalDiscountPrice,
					positionToTopList
				} = this

				let selectData = positionToTopList[selectIndex],
					params = {
						s_time: '',
						e_time: '',
						// amount: totalDiscountPrice,
						amount: 1,
						type: 2,
						body: `购买${selectData.name}`,
						pid: '',
					};

				switch (+selectData.id) {
					case 3:
						params.type_mode = 3
						break;
					case 4:
						params.type_mode = 4
						break;
					default:
						params.type_mode = 5
						break;
				}

				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 10000000,
					mask: true,
				});

				setWorkPromotion(params).then(res => {
			 
					if (res.code == 1) {
						uni.hideToast();
						
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success(res) {
								uni.navigateTo({
									delta: 2
								})
							},
							fail(res) {}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.job-dtl-box {
		padding: 0 30rpx 0;
	}

	.position-to-top {
		padding-top: 150rpx;
	}

	.info-item-wrap {
		border: 1px solid #ffffff;
		margin-bottom: 60rpx;
		width: 690rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 39rpx 7rpx rgba(51, 51, 51, 0.06);
		border-radius: 18rpx;
	}

	.info-item-wrap {
		&.select {
			border: 1px solid #E41805;
		}

		&.defualt {
			&.select {
				position: relative;

				&::before {
					position: absolute;
					top: 50%;
					left: 0;
					width: 50rpx;
					padding: 10rpx;
					font-size: 24rpx;
					transform: translate(0, -50%);
					box-sizing: border-box;
					background: #E41805;
					color: #ffffff;
					border-radius: 0rpx 10rpx 10rpx 0rpx;
					display: inline-block;
					content: attr(data-default);
				}
			}
		}
	}

	.info-item-wrap {
		.info-item {
			font-size: 36rpx;
			padding: 40rpx 100rpx;

			.discount-price {
				color: rgba(228, 24, 5, 1);
			}

			.bottom-box {
				padding-top: 15rpx;

				.price {
					color: #CCCCCC;
					font-size: 30rpx;
				}
			}
		}
	}

	.discription {
		.discription-item {
			color: #999999;
			font-size: 26rpx;
			padding-left: 30rpx;

			&::before {
				position: absolute;
				top: 12rpx;
				left: 0;
				display: block;
				font-size: 10rpx;
				content: '●';
			}
		}
	}

	.occupying {
		height: 120px;
	}

	.confirm-warp {
		box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.08);
		height: 120px;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		padding: 30rpx 40rpx 60rpx 40rpx;
		left: 0;
		box-sizing: border-box;

		.total-box {
			font-size: 36rpx;

			.price {
				color: #CCCCCC;
			}
		}

		.confirm-btn {
			width: 280rpx;
			background-color: #E41805;
			color: #ffffff;

			.total {
				font-size: 36rpx;
			}
		}
	}
</style>
